<!--
  功能：初始化功能描述
  作者：zichen-jiang
  邮箱：18307106535@163.com
  版本：v1.0.2
  修改内容：vue2.0初始化模板
  修改人员：zicheng-jiang
  修订时间：2020.10.01
  组件生成时间：2022年06月27日 11:17:06
-->
<template>
  <div class="manager">
    <div class="back">
      <span
        @click="
          () => {
            this.$router.go(-1);
          }
        "
      >◁ 返回上一页</span>
    </div>
    <main>
      <h1>管理员申请相关条例</h1>
      <p>
        1、用户（管理员）对社区的任何操作都必须遵守《中华人民共和国保守国家秘密法》、《中华人民共
        和国计算机信息系统安全保护条例》、《计算机软件保护条例》等有关计算机及互联网规定的法律和法规实施办法。
      </p>
      <p>
        2、用户的帐号，密码和安全性。社区中所有用户(管理员)，都持有一个帐号和密码。如果用户不保
        管好自己的帐号和密码安全，对由此产生的后果负全部责任。
      </p>
      <div>
        <p>3、用户责任：用户单独承担传输内容的责任。用户必须遵循以下条件：</p>
        <p>(1)、使用社区服务不作非法用途。</p>
        <p>(2)、不干扰或扰乱网络服务。</p>
        <p>(3)、不得利用社区危害国家安全、泄露国家秘密，不得得犯国家，社会，生体和公民的合法权益。</p>
        <p>(4)、不得利用社区制作、复制和传播违法的信息。</p>
      </div>
      <p>
        4、社区内容的所有权。包括:文字、软件、声音、相片、录象、图表等信息，用户只能在社区授
        权下才能使用这些内容，而不得擅自复制、篡改这些内容。
      </p>
      <p>5．自觉遵守社区的规章制度，服从社区统一安排及管理。</p>

      <p>6、辨是非、明事理。对违法等内容积极删除，绝不姑息。</p>
      <p>......待补充</p>
      <p>
        社区的所有用户必须对提供的信息负责，网络上信息、资源、软件等的使用应遵守知识产权的有关
        法律法规。相关解释权归嘻哩嘻哩官方所有，如果其中有任何条款与国家有关法律向抵触，则以国家法律的明文规定为准。
      </p>
      <p>同时我们欢迎广大用户和白帽子向我们提交产品和业务存在的信息安全漏洞，我们将会跟进处理，并将结果及时反馈给您。接收的信息安全漏洞包括但不局限于 XSS、CSRF、SSRF、XXE、SQL 注入、远程命令执行、逻辑设计缺陷等。</p>
      <h3>申请理由：</h3>
      <a-textarea
        v-model="text"
        placeholder="请认真填写申请管理员理由，否则将会被拒！"
        :auto-size="{ minRows: 5, maxRows: 7 }"
      />
      <p class="dizhi">
        <span>
          登录地址：
          <a href="http://106.12.170.235/admin" target="_blank">后台管理系统（开发中）</a>（账号及密码与社区同步）
        </span>
        <span>不得少于100字，当前字数{{text.trim().length}}</span>
      </p>
      <a-button type="primary" :disabled="disabled" @click="submit()">{{count}}确认申请</a-button>
    </main>
  </div>
</template>
<script>
//import(导入)其他文件（如：组件，工具js，第三方插件js，json文件，图片文件等）
import { requset } from "@/api";
("/dynamic");

export default {
  name: "manager",
  beforeRouteEnter(to, from, next) {
    if (JSON.parse(localStorage.getItem("userInfo")).Administrator !== "2") {
      next("/dynamic");
    } else {
      next();
    }
  },
  /**注册组件*/
  components: {},
  /**接受父组件传值*/
  props: {},
  data() {
    return {
      text: "",
      disabled: true,
      count: null,
      timer: null,
      userInfo: JSON.parse(localStorage.getItem("userInfo"))
    };
  },
  /**计算属性*/
  computed: {},
  /**监听data数据变化*/
  watch: {
    text() {
      if (this.text.trim().length >= 100 && this.count == "") {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    }
  },
  /**创建组件时执行(有VM对象this)*/
  created() {},
  /**加载完组件时执行(主要预处理数据)*/
  mounted() {
    this.getCode();
  },
  /**所有方法*/
  methods: {
    getCode() {
      const TIME_COUNT = 100;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.timer = "null";
            this.count = "";
            if (this.text.trim().length > 100) {
              this.disabled = false;
            }
          }
        }, 1000);
      }
    },
    submit() {
      let params = {
        userName: this.userInfo.userName,
        userId: this.userInfo.userId,
        phone: this.userInfo.phone,
        reason: this.text
      };
      requset("post", "/Administrator/create", params).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.text = "";
        } else {
          this.$message.error(res.data.msg);
        }
      });
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.back {
  padding: 16px 20px;
  font-size: 17px;
  font-weight: 600;
  position: sticky;
  top: 52px;
  background: #fff;
  z-index: 99;
}
.back > span:hover {
  color: #1890ff;
  cursor: pointer;
}
h1 {
  text-align: center;
}
main {
  padding: 16px 20px;
}
.dizhi {
  display: flex;
  justify-content: space-between;
}
</style>
